<template>
    <div class="password-reset">
        <h1 class="title">个人中心</h1>
        <el-form :model="form" ref="form" :rules="rules" label-width="100px">
            <el-form-item label="旧密码" prop="oldPassword">
                <el-input v-model="form.oldPassword" show-password type="password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="form.newPassword" show-password type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input v-model="form.confirmPassword" show-password type="password"></el-input>
            </el-form-item>
            <el-form-item class="password-reset-footer">
                <el-button type="primary" @click="submitForm">提&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>
                <el-button @click="dialogVisible = false" style="margin-left: 15vw">重&nbsp;&nbsp;&nbsp;&nbsp;置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "RePassWord",
    data() {
        var validateOldPass = (rule, value, callback) => {
            // if (value === '') {
            //     callback(new Error('请再次输入密码'));
            // } else if (value !== this.user.userPass) {
            //     callback(new Error('旧密码输入错误!'));
            // } else {
            //     callback();
            // }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.form.newPassword) {
                callback(new Error('两次输入的密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            labelPosition: 'right',
            form: {
                oldPassword: '',
                newPassword: '',
                confirmPassword: '',
            },
            rules: {
                oldPassword: [
                    {required: true, message: '请输入旧密码', trigger: 'blur'},
                    {validator: validateOldPass, trigger: ['blur', 'change']}
                ],
                newPassword: [
                    {required: true, message: '请输入新密码', trigger: 'blur'},
                ],
                confirmPassword: [
                    {required: true, message: '请再次输入新密码', trigger: 'blur'},
                    {validator: validatePass, trigger: ['blur', 'change']}
                ],
            }
        }
    },
    methods: {
        submitForm() {
            console.log("提交")
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 校验通过提交。
                    this.changePassword();
                }
            });
        },
        changePassword() {
            axios.post('http://localhost:8989/user/changePassword', {
                userId: this.user.userId,
                userName: this.user.userName,
                userPass: this.form.oldPassword,
                userNewPass: this.form.newPassword,
            }).then((response) => {
                console.log(response.data);
                this.dialogVisible = false;
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                this.$router.push('/')
            }).catch((error) => {
                this.$message({
                    message: '修改失败',
                    type: 'error'
                });
            })
        },
    }
}
</script>

<style scoped>

.password-reset {
    margin: 10vh 20vw 10vh 15vw;
    height: 75%;
}

.title {
    text-align: center;
    font-size: 3vw;
}

.password-reset-footer {
    margin-top: 6vh;
}
</style>